<template>
  <div>
    <ProOffice :src="src" :type="fileType" />
  </div>
</template>

<script setup>
defineOptions({ name: 'OfficeView' });
import ProOffice from '@/components/Office/Office.vue';
import { computed } from 'vue';
import { useRoute } from 'vue-router';
import { useTabsStore } from '@/stores/modules/tabs';

const route = useRoute();
const tabStore = useTabsStore();

const src = computed(() => route.query.src || '');
const filename = computed(() => src.value.split('/').pop() || '');
const fileType = computed(() => determineFileType(filename.value));
tabStore.setTabsTitle(filename.value);
// Constants
const IMAGE_MIME_PREFIX = 'image/';
const VIDEO_MIME_PREFIX = 'video/';
const MIME_MAP = Object.freeze({
  // 图片类型
  jpg: 'image/jpeg',
  jpeg: 'image/jpeg',
  png: 'image/png',
  gif: 'image/gif',
  bmp: 'image/bmp',
  tiff: 'image/tiff',
  webp: 'image/webp',
  svg: 'image/svg+xml',
  // 视频类型
  mp4: 'video/mp4',
  webm: 'video/webm',
  avi: 'video/x-msvideo',
  mov: 'video/quicktime',
  mpeg: 'video/mpeg',
  flv: 'video/x-flv',
  wmv: 'video/x-ms-wmv',
  mkv: 'video/x-matroska',
  // 文档类型
  pdf: 'application/pdf',
  zip: 'application/zip'
});

// 逻辑封装
const getFileExtension = filename => {
  const lastDotIndex = filename.lastIndexOf('.');
  return lastDotIndex > 0 ? filename.slice(lastDotIndex + 1).toLowerCase() : '';
};

const getMimeType = extension => MIME_MAP[extension] || '';

const determineFileType = target => {
  if (!target) return 'unknown';

  // 处理MIME类型输入
  if (target.includes('/')) {
    if (target.startsWith(IMAGE_MIME_PREFIX)) return 'image';
    if (target.startsWith(VIDEO_MIME_PREFIX)) return 'video';
    return target.split('/')[1] || 'unknown';
  }

  // 处理文件名输入
  const extension = getFileExtension(target);
  const mimeType = getMimeType(extension);

  if (mimeType.startsWith(IMAGE_MIME_PREFIX)) return 'image';
  if (mimeType.startsWith(VIDEO_MIME_PREFIX)) return 'video';
  return extension || 'unknown';
};
</script>

<style lang="scss" scoped></style>
